
    <div class="am-demo-page">
      <div class="am-demo-bd">
        <div class="am-wingblank am-wingblank-lg">
          <div class="sub-title">Normal</div>
        </div>
        <div style="border-bottom: 1px solid #ddd;">
          <SearchBar [placeholder]="'Search'" [maxLength]="8"></SearchBar>
        </div>
        <div class="am-whitespace am-whitespace-md"></div>
        <div class="am-wingblank am-wingblank-lg">
          <div class="sub-title">AutoFocus when enter page</div>
        </div>
        <div style="border-bottom: 1px solid #ddd;">
          <SearchBar [placeholder]="'自动获取光标'" [setFocus]="autoFocus"></SearchBar>
        </div>
        <div class="am-wingblank am-wingblank-lg">
          <div class="sub-title">Focus by operation</div>
        </div>
        <div style="border-bottom: 1px solid #ddd;">
          <SearchBar [placeholder]="'手动获取获取光标'" [setFocus]="focusObj"></SearchBar>
        </div>
        <a role="button" class="am-button" (click)="handleClick()"><span>click to focus</span></a>
        <div class="am-wingblank am-wingblank-lg">
          <div class="sub-title">Show cancel button</div>
        </div>
        <div style="border-bottom: 1px solid #ddd;">
          <SearchBar
            [(ngModel)]="value"
            [placeholder]="'Search'"
            [showCancelButton]="true"
            (onBlur)="blur()"
            (onFocus)="focus()"
            (onCancel)="cancel()"
            (onClear)="clear(value)"
            (onSubmit)="submit(value)"
            (onChange)="change($event)"
          ></SearchBar>
        </div>
      </div>
    </div>
  